<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器优先级</title>
		<style type="text/css">
			.aaa{background-color:yellow}
			p{background-color:red}
			#bbb{background-color:green}
			/*当使用不同选择器，选中同一元素并设置相同样式时，这时样式之间产生冲突，最终选哪种样式由选择器优先级决定优先级高的优先显示
			 内联样式，1000
			 id选择器，100
			 类和伪类，10
			 元素选择器，1
			 通配*，0
			 继承的样式，没有优先级*/
			*{font-size:50px}
			p{font-size:30px}
			
			#bbb{color:red}
			p#bbb{color:orange}
/*当选择其中包含多种选择器时，需要将多种领选择器的优先级相加然后比较
 -----注意：选择器优先级计算不会超过他的最大数量级
 -----比如：id选择器最多为900，不会超过1000*/
			
			.ccc{color:red}
			.ddd{color:blue}
/*选择器优先级一样时，选用后面的（第二行111111111字体颜色为蓝色）*/
			
/*并集选择器的有限集时独立计算的
 div,p,.aaa,#bbb*/
			
/*$$$在样式的最后添加一个!important,则此时该样式将获得一个最大的优先级，将会优先于所有样式显示甚至超过内联样式，但是在开发中尽量不要使用，因为不好维护*/
		</style>
	</head>
	<body>
		<p class="aaa" id="bbb" style="background-color:blue">ppppppp<span>0000000</span></p>
		<p class="ccc ddd">111111111111</p>
	</body>
</html>
